<template>
  <div id="remindChange">
    <el-collapse v-model="activeNames1">
      <el-collapse-item title="内容样式" name="1">
        <ul class="content-list">
          <li>
            <span>文字颜色：</span>
            <div>
              <colorSetting v-model="styles.colorWord" :originColor="styles.colorWord" initColor="#fff"></colorSetting>
            </div>
          </li>
          <li>
            <span>背景颜色：</span>
            <div>
              <colorSetting v-model="styles.colorBg" :originColor="styles.colorBg" initColor="#000"></colorSetting>
            </div>
          </li>
          <li>
            <span>透明度：</span>
            <div>
              <edgeSetting v-model="styles.percent" unit="px" :max="100" :init="Number(styles.percent)"></edgeSetting>
            </div>
          </li>
          <li>
            <span>上下偏移：</span>
            <div>
              <edgeSetting v-model="styles.shifting" unit="px" :max="600" :init="Number(styles.shifting)"></edgeSetting>
            </div>
          </li>
        </ul>
      </el-collapse-item>
    </el-collapse>
    <el-collapse v-model="activeNames2">
      <el-collapse-item title="内容" name="2">
        <ul class="content-list">
          <li style="margin-bottom:0">
            <span>数据设置：</span>
            <div>
              <div>
                <el-radio v-model="styles.type" label="1">读取系统订单</el-radio>
                <el-radio v-model="styles.type" label="2">自定义数据</el-radio>
              </div>
              <div v-if="styles.type==2">
                <ul class="btn-list">
                  <li v-for="(v,i) in styles.numberList" :key="i">
                    <ul>
                      <li>
                        <span>图片：</span>
                        <div>
                          <upLoadImage :height="50" :v="v"></upLoadImage>
                        </div>
                      </li>
                      <li>
                        <span>昵称：</span>
                        <el-input
                          style="width:250px"
                          size="small"
                          type="text"
                          placeholder="请输入内容"
                          v-model="v.text"
                          show-word-limit
                        />
                      </li>
                      <li>
                        <span>下单时间：</span>
                        <el-input
                          style="width:250px"
                          size="small"
                          placeholder="请输入内容"
                          v-model="v.time"
                        >
                          <template slot="append">秒</template>
                        </el-input>
                      </li>
                    </ul>
                    <i @click="deleteBtn(i)" class="el-icon-error deleteIcon"></i>
                  </li>
                </ul>
              </div>
            </div>
          </li>
          <li v-if="styles.type==2">
            <span></span>
            <div>
              <el-button @click.native="addRemind" size="small" style="width:360px" plain>
                <i class="el-icon-plus"></i>
                <span>添加</span>
              </el-button>
            </div>
          </li>
        </ul>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import colorSetting from "../../comm/colorSetting";
import upLoadImage from "../../comm/upLoadImage";
import edgeSetting from "../../comm/edgeSetting";
import Swiper from "swiper";
import "swiper/dist/css/swiper.min.css";
export default {
  name: "remindChange",
  data() {
    return {
      activeNames1: "1",
      activeNames2: "2",
    };
  },

  created() {},
  computed: {
    ...mapState(["remind", "currentId", "currentName"]),
    styles() {
      return this.remind[0].styles;
    },
  },
  components: {
    colorSetting,
    upLoadImage,
    edgeSetting
  },
  methods: {
    addRemind() {
      this.styles.numberList.push({
        img: "",
        text: "",
        time: "",
      });
    },
    deleteBtn(i) {
      if (this.styles.numberList.length == 1) {
        return false;
      }
      this.styles.numberList.splice(i, 1);
    },
  },
};
</script>

<style lang='less' scoped>
@import url("../../../assets/css/base.less");
/deep/.el-input-group__append,
.el-input-group__prepend {
  padding: 0 10px;
}
.line {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.btn-list {
  margin-top: 20px;
  > li:hover {
    > .deleteIcon {
      display: block;
    }
  }
  > li {
    background-color: #f7f7f7;
    padding: 10px;
    position: relative;
    margin-bottom: 10px;
    > ul:nth-of-type(1) {
      margin-left: 10px;
      > li {
        margin-bottom: 10px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        > span {
          display: inline-block;
          width: 70px;
          text-align: right;
          margin-right: 10px;
        }
      }
    }
    > .deleteIcon {
      position: absolute;
      right: 0;
      top: 0;
      font-size: 20px;
      display: none;
    }
  }
}
</style>
